<template>
  <div class="app-container">
    <el-card>
      <el-row type="flex" justify="end" class="row-header">
        <el-button type="primary" @click="addFn">新增角色</el-button>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="title"
          label="角色名称"
        />
        <el-table-column
          prop="description"
          label="角色描述"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-button size="small" type="primary" @click="assignFn(row.id)">分配权限</el-button>
            <el-button size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" justify="center" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig._limit"
          :current-page="curPage"
          @current-change="toPageFn"
        />
      </el-row>
      <!-- 新增/编辑弹窗 -->
      <AddRoles ref="addRoleRef" :show-dialog.sync="showDialog" @updateEvent="getRolesList" />
      <!-- 分配权限弹窗 -->
      <AssignPer ref="assignRef" :is-show-diaglog.sync="isShowDiaglog" @updateEvent="getRolesList" />
    </el-card>
  </div>
</template>

<script>
import { getRolesList, delRole } from '@/api/roles'
import AddRoles from './components/add-roles.vue'
import AssignPer from './components/assign-per.vue'
export default {
  components: { AddRoles, AssignPer },
  data() {
    return {
      tableData: [],
      total: 0,
      pageConfig: {
        _limit: 5,
        _start: 0
      },
      curPage: 1, // 当前页码
      curSize: null, // 当前页码的数据条数
      showDialog: false, // 控制新增/编辑弹窗
      isShowDiaglog: false // 控制分配权限弹窗
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 初始化列表
    async getRolesList() {
      // 获取角色列表
      const res = await getRolesList(this.pageConfig)
      this.tableData = res.data
      // 当前页的数据数量
      this.curSize = res.data.length
      // 获取数据总数
      const result = await getRolesList()
      this.total = result.data.length
      // console.log(this.total)
    },
    // 页面改变时触发
    toPageFn(page) {
      // console.log(page)
      this.curPage = page
      this.pageConfig._start = (page - 1) * this.pageConfig._limit
      // console.log(this.pageConfig._start)
      // 刷新列表
      this.getRolesList()
    },
    // 新增角色
    addFn() {
      this.showDialog = true
    },
    // 分配权限
    assignFn(id) {
      this.isShowDiaglog = true
      // 获取角色权限
      this.$refs.assignRef.getRolePerById(id)
    },
    // 编辑角色
    editFn(id) {
      this.showDialog = true
      this.$refs.addRoleRef.getRoleById(id)
    },
    // 删除角色
    async delFn(id) {
      try {
        await this.$confirm('确定要删除吗？', '警告', {
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        })
        await delRole(id)

        this.$message.success('删除成功')
        if (this.curPage > 1 && this.curSize === 1) {
          await this.toPageFn(this.curPage - 1)
          return
        }
        // 刷新列表
        this.getRolesList()
      } catch (err) {
        console.log(err)
        this.$message.info('已取消删除')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.row-header {
  margin-bottom: 20px;
}
</style>
